<script lang="ts" setup>
// eslint-disable-next-line ts/ban-ts-comment
// @ts-ignore
import { Pane, Splitpanes } from 'splitpanes'
import { methodColorClass } from '~/utils/config'
import WorkspaceAside from './components/aside.vue'
import WorkspaceMain from './components/main.vue'

onMounted(() => {
  getData()
})

function getData() {}

const openid = ref<string>('')
const openList: any = ref([])
function handleOpen(row: any) {
  const ids = openList.value.map((item: any) => item.id)
  if (!ids.includes(row.id)) {
    openList.value.push(row)
  }
  openid.value = row.id
}

const asideRef = ref()
function handleRemove(paneName: any) {
  openList.value = openList.value.filter((item: any) => item.id !== paneName)

  if (openid.value !== paneName) {
    return
  }

  const length = openList.value.length
  if (length) {
    openid.value = openList.value[length - 1].id
  }
  else {
    openid.value = ''
  }
  asideRef.value?.setCurrentKey(openid.value)
}

function handleClick(pane: any) {
  openid.value = pane.paneName
  asideRef.value?.setCurrentKey(openid.value)
}
</script>

<template>
  <LayoutMain>
    <template #main>
      <section class="mix-splitter mx-5 my-3 min-w-300 flex-1 rounded-xl bg-white px-3 py-5">
        <Splitpanes class="default-theme">
          <Pane size="18" style="background-color: white;">
            <WorkspaceAside ref="asideRef" @handle-click="handleOpen" />
          </Pane>
          <Pane size="82" min-size="50" style="background-color: white;">
            <el-tabs
              v-model="openid"
              type="card"
              closable
              style="margin-left: 4px;"
              @tab-remove="handleRemove"
              @tab-click="handleClick"
            >
              <el-tab-pane
                v-for="item in openList"
                :key="item.ids"
                :name="item.id"
              >
                <template #label>
                  <div class="max-w-35 w-full flex items-center">
                    <span class="mr-1 h-full flex items-center text-xs font-bold" :class="item.method ? methodColorClass[item.method.toLowerCase()] : ''">
                      {{ item.method }}
                    </span>
                    <span class="flex-1 text-ellipsis">
                      {{ item.name }}
                    </span>
                  </div>
                </template>
                <WorkspaceMain :record="item" />
              </el-tab-pane>
            </el-tabs>
          </pane>
        </Splitpanes>
      </section>
    </template>
  </LayoutMain>
</template>

<style lang="scss" scoped>
@use '~/assets/splitpanes.scss';
@use '~/assets/custom.scss';
</style>

<style lang="scss" scoped>
.mix-splitter :deep() .el-tabs {
  height: 100%;
}
.mix-splitter :deep() .el-tabs__header {
  height: 33px;
}
.mix-splitter :deep() .el-tabs__item {
  width: 200px;
  height: 32px;
}

.mix-splitter :deep() .el-tab-pane {
  height: 100%;
}

.mix-splitter :deep() .el-tabs__content {
  height: calc(100% - 48px);
}
</style>
